<template>
  <div class="app-container home">
    <t-ag-grid
      align="center"
      header-align="center"
      :suppress-row-transform="true"
      :tooltipShowDelay="0"
      :columnDefs="column"
      :rowData="tableData"
      :defaultColDef = "{
        // suppressMenu:true
        menuTabs: ['filterMenuTab', 'columnsMenuTab']
      }"
      @cell-double-clicked="onCellDoubleClicked"
    />
    <!-- :suppressColumnVirtualisation="true" -->

    <el-dialog v-model="openDialog" width="350" append-to-body>
      <el-form label-width="80px">
        <el-form-item :label="label">

          <!-- 处理状态 -->
          <el-select v-show="label === '处理状态'" v-model="formData" style="width: 200px;">
              <el-option
                  v-for="dict in statusOptions"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
              />
          </el-select>

          <!-- 忽视条件 -->
          <el-input-number v-show="label === '忽视条件'" v-model='specialData' :min="0" :max="3600" />

          <!-- 适用对象 -->

          <el-select multiple
                                clearable
                                collapse-tags
                                collapse-tags-tooltip v-show="label === '适用对象'" v-model="specialDataObj" style="width: 200px;">
              <el-option
                  v-for="dict in applicableObjectsOptions"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
              />
          </el-select>

          <el-select v-show="label === '启停状态'" v-model.value='formData' style="width: 200px;">
              <el-option
                  v-for="dict in startStopStatusOptions"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
              />
          </el-select>

          <!-- 备注 -->
          <el-input v-show="label === '备注'" v-model="formData" style="width: 200px;"/>

        </el-form-item>
      </el-form>
      <template #footer>
          <div class="dialog-footer">
              <el-button type="primary" @click="submitSecondLine">确 定</el-button>
              <el-button @click="cancelSecondLine">取 消</el-button>
          </div>
      </template>
  </el-dialog>

  </div>
</template>

<script setup name="MachineIgnore">
  import { newTableRowSpan } from "@/utils/zhangxintong"
  import { get } from "lodash-es"
  import { gridRowSpanning } from "@/components/ag-grid"
  import { column, queryTableData, getEditOptions, editTableData } from './config'

  const openDialog = ref(false)
  const statusOptions = [
    { label: '现状态', value: '现状态' },
    { label: '后状态', value: '后状态' }
  ]
  const startStopStatusOptions = [
    { label: '开启', value: '开启' },
    { label: '关闭', value: '关闭' }
  ]
  const applicableObjectsOptions = ref([])

  const form = reactive({
    firstLine: null,
    secondLine: null
  })

  let rowSpanData = {}
  const tableData = ref()

  const spanTarget = ['machineIgnoringLogic', 'timeRules', 'priority']
  const rowSpan = ({ colDef, node, data }) => {
    const { field } = colDef
    return get(rowSpanData, `${node?.rowIndex}.${field}`, 1)
  }

  const colSpan = ({ data }) => {
    if(data.nowEptDescription.includes('反复')){
      return 2
    }
    return 1
  }

  const cellRenderer = ({ value }) => {
    if(value.includes('反复')){
      return `<span style="font-weight: 700;">${value}</span>`
    }
    return value
  }

  const queryList = () => {
    queryTableData().then((res) => {
      tableData.value = res.rows
      rowSpanData = gridRowSpanning(tableData.value, spanTarget, { null: true, isMultilevel: true })
    })
  }

  column.forEach((item_1) => {
    item_1.sortable = false
    if(spanTarget.includes(item_1.field)){
      // item_1.rowSpan = rowSpan
    }
    item_1.children?.forEach((item_2) => {
      item_2.children?.forEach((item_3) => {
        item_3.sortable = false
        if( item_3.field === 'nowEptDescription'){
          item_3.colSpan = colSpan
          item_3.cellRenderer = cellRenderer
        }
      })
    })
  })

  const _temp = ['processingStatus', 'neglectingConditions', 'applicableObjects', 'startStopStatus', 'comments']
  const clickField = ref() // 点击的filed
  const label = ref() // 点击的是那一列
  const formData = ref() // 点击的值
  const specialData = ref() // 新创建一个变量 用于忽视条件，数字输入框有告警 第一次点击导致值传不到输入框中
  const specialDataObj = ref() // 适用对象 的值 重新赋值，第一次点击导致值传不到输入框中（避免变量共用的场景）

  /** 获取修改的参数 */
  const _ID = ref()
  const _KEY = ref()

  const onCellDoubleClicked = ({ colDef, value, data, rowIndex }) => {
    if(_temp.includes(colDef.field)){
      clickField.value = colDef.field
      label.value = colDef.headerName
      if(colDef.headerName === '忽视条件'){
        specialData.value = Number(value)
      }
      if(colDef.headerName === '适用对象'){
        if( value.split(',')[0] === '默认所有设备' || value.split(',')[0] === '' ){
          specialDataObj.value = []
        } else {
          specialDataObj.value = value.split(',')
        }
      }
      formData.value = value
      openDialog.value = true
      _ID.value = data.id
      _KEY.value = colDef.field
    }
  }

  /** 获取入参 */
  const getVal = () => {
    if(label.value === '忽视条件'){
      return specialData.value
    }
    if(label.value === '适用对象'){
      return specialDataObj.value.join(',').length ? specialDataObj.value.join(',') : '默认所有设备' /* 赋默认值 */
    }
    return formData.value
  }

  /** 提交 */
  const submitSecondLine = () => {
    editTableData({
      id: _ID.value,
      [_KEY.value]: getVal()
    }).then((res) => {
      queryList()
      openDialog.value = false
    })
  }

  /** 取消 */
  const cancelSecondLine = () => {
    openDialog.value = false
  }

  queryList()

  /** 获取适用对象 options */
  getEditOptions({
    oeeRerunFlag: "Y"
  }).then((res) => {
    res.rows.forEach((item) => {
      applicableObjectsOptions.value.push({
        label: item.machineTypeId,
        value: item.machineTypeId
      })
    })
  })

</script>